import "./index.less"
import Echarts from "@/components/echarts"
import { useState, useRef, useEffect } from "react"
import barOption from "../config/Bar/barOption"
import barOption2 from "../config/Bar/barOption2"
import barOption3 from "../config/Bar/barOption3"
import barOption4 from "../config/Bar/barOption4"
import { randomData, randomData2 } from "@/utils/barRandomData"
import barOption5 from "../config/Bar/barOption5"
import barOption6 from "../config/Bar/barOption6"
type EChartsOption = echarts.EChartsOption;
import { FundViewOutlined, } from '@ant-design/icons';
import { useDispatch } from "react-redux"
import { handlerBread } from "@/redux/actions"

const BreadData:breadType[] = [{
    icon: <FundViewOutlined />,
    label: "Echarts",
    herf: ''
}, {
    icon: undefined,
    label: "柱状图",
    herf: ''
}]



export default function Bar() {
    // barOption5
    let baseData = randomData()
    let time: any = null
    let index = 0
    let endIndex = 8
    let instance: echarts.ECharts;
    const dispatch = useDispatch()
    function changeData() {
        // SetData(baseData.slice(index, endIndex))
        let sliceData = baseData.slice(index, endIndex)
        let option: EChartsOption = {
            xAxis: {
                data: sliceData.map((item) => item.name)
            },
            series: [{
                data: sliceData.map((item) => item.value)
            }]
        }
        instance && instance.setOption(option)
        index++
        endIndex++
        if (endIndex > baseData.length) {
            index = 0
            endIndex = 8
        }
    }
    function getEchartsInstance(echartsInstance: echarts.ECharts) {
        instance = echartsInstance
        let option5 = barOption5(echartsInstance)
        echartsInstance.setOption(option5)
    }
    useEffect(() => {
        index = 0
        endIndex = 8
        changeData()
        time = setInterval(() => {
            changeData()
        }, 1500)
        //更改面包屑
        dispatch(handlerBread(BreadData))
        return () => {
            clearInterval(time)
        }
    }, [])


    //barOption6
    let baseData2 = randomData2()
    let time2: any = null
    let echart6Instance: echarts.ECharts;
    function getEchartsInstance2(echartsInstance: echarts.ECharts) {
        let option6 = barOption6(echartsInstance)
        echart6Instance = echartsInstance
        if (option6.yAxis) {
            (option6.yAxis as any).data = baseData2.map((item) => item.name)
        }
        echart6Instance.setOption(option6)

        changeData2()
    }
    function changeData2() {
        for (var i = 0; i < baseData2.length; ++i) {
            if (Math.random() > 0.9) {
                baseData2[i].value += Math.round(Math.random() * 2000);
            } else {
                baseData2[i].value += Math.round(Math.random() * 200);
            }
        }
        let option: EChartsOption = {
            series: [{
                data: baseData2
            }]
        }
        echart6Instance && echart6Instance.setOption(option)
    }
    useEffect(() => {
        changeData2()
        time2 = setInterval(() => {
            changeData2()
        }, 3000)
        return () => {
            clearInterval(time2)
        }
    }, [])

    return (
        <div className="Ecahrts_views flex">
            <Echarts myOption={barOption} width={"32%"} height={"350px"} className={"barOption"} />
            <Echarts myOption={barOption2} width={"32%"} height={"350px"} className={"barOption2"} />
            <Echarts myOption={barOption3} width={"32%"} height={"350px"} className={"barOption3"} />
            <Echarts myOption={barOption4} width={"32%"} height={"350px"} className={"barOption4"} />
            <Echarts width={"32%"} height={"350px"} className={"barOption5"} refResult={getEchartsInstance} />
            <Echarts width={"32%"} height={"350px"} className={"barOption6"} valueAxis={true} refResult={getEchartsInstance2} />
        </div>
    )
}